<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气</title>
    <style>
        #show {
            text-align: center;
            width: 808px;
            display: flex;
            flex-wrap: wrap;
        }

        #city {
            text-align: center;
            border: 1px solid black;
        }

        #details {
            border: 1px solid black;
        }

        #ul {
            list-style: none;
        }

        #li:hover {
            cursor: pointer;
            background: rgb(66, 64, 64);
        }

        #manyCity {
            display: none;
            width: 174px;
            border: 1px solid #ccc;
            position: absolute;
            left: 120px;
            top: 29px;
            background-color: #ccc;
        }
        #cityDetail{
            width: 808px;
        }
    </style>
    <script src="jquery1.9/jquery-1.9.0.min.js"></script>
    <script src="template.js"></script>
    <script>
        function loadData() {
            var cityId = $("#cityId").val();
            var cityName = $("#cityName").val();
            $.ajax({
                url: "http://toy1.weather.com.cn/search",
                dataType: "jsonp",
                data: { cityname: cityName },
            }).done((data) => {
                console.log("data:", data);
                if (!$("#cityName").val()) {
                    $("#manyCity").css("display", "none");
                } else {
                    $("#manyCity").css("display", "block");
                    $("#ul").empty();
                    console.log(data);
                    console.log(data.length);
                    for (let i = 0; i < data.length; i++) {
                        console.log(data[i].ref);
                        var loc = data[i].ref;
                        // console.log("编号：" + parseInt(data[i].ref));
                        console.log(loc.split("~", 10));//将字符串转为数组
                        var arrCity = loc.split("~", 10)
                        var li = $(`<li id="li" class="${arrCity[0].substring(0,9)}" onclick='doSelect(this)'>${arrCity[9]}-${arrCity[2]}</li>`);
                        $("#ul").append(li);
                    }
                }
            });
        }


        function doSelect(obj) {
            var cityid = obj.getAttribute("class");
            console.log(obj);
            $("#cityName").val($(obj).html());
            $("#manyCity").css("display", "none");
            $.ajax({
                url: "https://query.asilu.com/weather/weather/",
                dataType: "jsonp",
                data: { id: cityid },
            }).done((data) => {
                $("#show").empty();
                $("#cityDetail").empty();
                console.log(data);
                var city = $("<div id='city' ></div>")
                city.html(`
                <div>id:${data.id}</div>
                <div>城市:${data.city}</div>
                <div>更新时间:${data.update_time}</div>
                <div>当前日期:${data.date}</div>
            `);
            $("#cityDetail").append(city);
                for (let i = 0; i < data.list.length; i++) {
                    var divs = $("<div id='details' style='width: 200px;height: 290px;'></div>")
                    divs.html(`
                          <p id="date">日期:${data.list[i].date}</p>
                          <p>天气:${data.list[i].weather}</p>
                          <p>气温:${data.list[i].temp}</p>
                          <p>风力:${data.list[i].w}</p>
                          <p>风向:${data.list[i].wind}</p>
                      `);
                      $("#show").append(divs);
                    if(data.list[i].icon1 == data.list[i].icon2 || data.list[i].icon1==false){
                          divs.html(`
                          <p>日期:${data.list[i].date}</p>
                          <p><img src="https://cdn.asilu.com/weather/icon/40/d${data.list[i].icon2}.png" class="first" alt="no image"></p>
                          <p>天气:${data.list[i].weather}</p>
                          <p>气温:${data.list[i].temp}</p>
                          <p>风力:${data.list[i].w}</p>
                          <p>风向:${data.list[i].wind}</p>
                      `);
                    }else if(data.list[i].icon2==false){
                          divs.html(`
                          <p>日期:${data.list[i].date}</p>
                          <p><img src="https://cdn.asilu.com/weather/icon/40/d${data.list[i].icon1}.png" class="first" alt="no image"></p>
                          <p>天气:${data.list[i].weather}</p>
                          <p>气温:${data.list[i].temp}</p>
                          <p>风力:${data.list[i].w}</p>
                          <p>风向:${data.list[i].wind}</p>
                      `);
                    }else{
                        divs.html(`
                          <p>日期:${data.list[i].date}</p>
                          <p><img src="https://cdn.asilu.com/weather/icon/40/d${data.list[i].icon1}.png" class="first" alt="no image">
                            <img src="https://cdn.asilu.com/weather/icon/40/d${data.list[i].icon2}.png" class="first" alt="no image"></p>
                          <p>天气:${data.list[i].weather}</p>
                          <p>气温:${data.list[i].temp}</p>
                          <p>风力:${data.list[i].w}</p>
                          <p>风向:${data.list[i].wind}</p>
                      `);
                    }
                    $("#show").append(divs);
                }
            });
        }


    </script>
</head>

<body>
    请输入城市名：<input id="cityName" type="text" onkeyup="loadData()">
    <br>
    <!-- <input type="button" value="loadData" onclick="loadData()" /> -->
    <div id="manyCity">
    <ul id="ul"></ul>
    </div>
    <div id="cityDetail">
    
    </div>
    <div id="show">
        <!-- <div id="city" ></div> -->
        <!-- <div id="details" style="width: 250px;height: 250px;"></div> -->
    </div>
</body>

</html>